<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1"><a href="http://localhost:8080/vue-demo/showAllGoods.html">所有商品</a></el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1"><a href="http://localhost:8080/vue-demo/usersMai.html" >修改个人信息</a></el-menu-item>
            <el-menu-item index="2-2"><a href="http://localhost:8080/vue-demo/showUserGoods.html" >管理商品</a></el-menu-item>
            <el-menu-item index="2-3">与客户聊天</el-menu-item>
            <el-menu-item index="2-4"><a href="http://localhost:8080/vue-demo/showCancelOrder.html" >我的商品售后</a></el-menu-item>
            <el-menu-item index="2-5"><a href="https://www.ele.me">管理收到的订单</a></el-menu-item>

        </el-submenu>
        <el-menu-item index="3" ><a href="http://localhost:8080/vue-demo/manageAddress.html" target="_blank">管理地址</a></el-menu-item>
        <el-menu-item index="4"><a href="http://localhost:8080/vue-demo/showMyGouwucar.html" target="_blank">我的购物车</a></el-menu-item>
        <el-menu-item index="5"><a href="http://localhost:8080/vue-demo/addPrice.html" target="_blank">积分充值</a></el-menu-item>
        <el-submenu index="6">
            <template slot="title">支付订单管理</template>
            <el-menu-item index="6-1"><a href="http://localhost:8080/vue-demo/showAllOrderForm.html" >所有订单</a></el-menu-item>
            <el-menu-item index="6-2"><a href="http://localhost:8080/vue-demo/showFalseOrderForm.html" >未付款订单</a></el-menu-item>
            <el-menu-item index="6-3"><a href="http://localhost:8080/vue-demo/showSuccessOrderForm.html" >已支付订单</a></el-menu-item>
        </el-submenu>
        <el-menu-item index="7" @click="signIn">每日签到</el-menu-item>
        <el-menu-item index="8" @click="dialogVisible11 = true">退出登录</el-menu-item>
    </el-menu>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="退出登录"
            :visible.sync="dialogVisible11"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="users" label-width="80px">
            <el-form-item>
                <el-button type="primary" @click="cancelLogin">确认要退出登录吗</el-button>
                <el-button @click="dialogVisible11 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--按钮-->
    <el-row>
        <el-button type="danger" plain @click="dialogVisible = true">充值</el-button>
    </el-row>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="充值"
            :visible.sync="dialogVisible"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="user" label-width="80px" >
            <el-form-item label="充值金额" prop="price">
                <el-input v-model.number="user.price" placeholder="请输入充值的金额"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addgoods">充值</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="等待"
            :visible.sync="dialogVisible2"
            width="30%">

        <span>正在审批中</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
        </span>

    </el-dialog>
    <!--表格-->
    <el-form status-icon :rules="rules" ref="form" :model="user" label-width="80px" >
        <el-form-item label="存款" prop="price">
            <el-input v-model.number="user.money"  readonly></el-input>
        </el-form-item>
    </el-form>
</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>

    new Vue({
        el:"#app",

        mounted(){
            //当页面加载完成之后，发布异步请求获取数据

            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/loginUserMai"
            }).then(function (resp) {
                _this.user = resp.data;
            })


        },
        methods: {

            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            cancelLogin(){
                //this.goods = this.tableData[index];
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/cancelLogin",
                }).then(function (resp) {
                    if (resp.data === "success") {
                        alert("您已经退出登录")
                        window.location.href = "http://localhost:8080/vue-demo/hello.html";
                    }
                })
            },
            signIn(){
                //this.goods = this.tableData[index];
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/signIn",
                }).then(function (resp) {
                    if (resp.data === "success") {
                        alert("今日签到成功，已为您增加2积分")
                    }
                    else if(resp.data === "error"){
                        alert("今日已签到")
                    }
                })
            },
            addgoods() {
                //console.log(this.goods);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/addPrice",
                    data:_this.user.price
                }).then(function (resp) {
                    if (resp.data === "success") {
                        _this.dialogVisible =  false
                        _this.dialogVisible2 = true
                    }
                    else if (resp.data === "error") {
                        alert("输入的钱不对")
                    }
                })
            },
        },
        data() {
            var checkNum = (rule, value, callback) => {
                if (value < 0) {
                    return callback(new Error('充值数目不对劲'));
                }
                else {
                    setTimeout(() => {
                        if (!Number.isInteger(value)) {
                            callback(new Error('必须是整数'));
                        }else {
                            callback();
                        }
                    }, 1000);
                }
            }
            return {
                activeIndex2: '1',
                currentPage: 4,
                //搜索表单数据

                user: {
                    userID:'',
                    userPwd: '',
                    userNickName: '',
                    registerType:'注册为用户',
                    userPhone:'',
                    userAccount:'',
                    userDo:'',
                    userName:'',
                    money:'',
                    pass: '',
                    checkpass: '',
                    price:'0',
                },
                users:{},
                rules: {
                    price: [
                        {validator: checkNum, trigger: 'blur'}
                    ],

                },
                //展开对话框
                dialogVisible: false,
                dialogVisible2: false,
                dialogVisible10: false,
                dialogVisible11: false,
            }
        }
    })
</script>

</body>
</html>